<template>
  <div class="flyNotice">
    <ListTab
      v-model="tabStatus"
      :show-header="!showMobilePage"
      :tabs="tabs"
      :max-badge="{ num: 10000, str: '1w', unit:'+'}"
      is-table
      @tabClick="handleTabClick" />
    <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="min-fill-page flyNotice-list">
      <DataDisplay
        :data-list="statisticsList"
        class="mb16 mobile-data"
      />
      <div v-if="!showMobilePage" class="filter">
        <FilterInput
          ref="FilterToolRef"
          v-model="paramsObj"
          :filter-list="filterList"
          is-show-config
          show-search-btn
          @selectChange="handelFilterInputChange"
          @deleteTagBefore="deleteTagBefore"
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus" />
        <template v-if="hasRouteAuth('crm:queryOrder:export')">
          <InfoIcon content="单次最高可导出100条询单数据" style="width: 16px;margin-right: 4px;" />
          <btnGroup
            ref="btnGroupRef"
            :list="[
              {label:'导出', type: 'export', auth: hasRouteAuth('crm:queryOrder:export'), exportApi:'/admin/queryOrder/export', exportName: '飞来询单导出', exportNameLast: exportNameLast(), beforeExport: exportBeforeExport, refName:'exportRef'},
            ]"
            style="margin-right: 12px"
          />
        </template>

        <createBtn v-if="hasRouteAuth('crm:flyNotice:create')" @click.native="toCreate"/>
      </div>
      <div class="table-list">
        <div v-loading="listLoading" style="min-height: 300px;">
          <u-table
            v-if="list.items.length"
            ref="tableRef"
            :data="list.items"
            :border="true"
            :row-height="rowHeight(54)"
            :height="setTableHeight"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            hightlight-current-row
            @select="selectTable"
            @select-all="selectTable"
            @sort-change="sortMethod">
            <u-table-column
              :fixed="selectFixed"
              align="center"
              type="selection"
              width="50"/>
            <u-table-column :min-width="handleTdWidth()" align="left" label="询单编号">
              <template slot-scope="scope">
                <div v-if="scope.row.sn" style="cursor:pointer;color:#406EFF;" @click="toDetail(scope.row)">
                  <ToolTip :content="handleSnNumber(scope.row.sn)" is-can-click @handelClick="toDetail(scope.row)" />
                </div>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="品牌名称">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.brandName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="产品名称">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.productName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="下单平台" min-width="120">
              <template slot-scope="scope">
                <div class="flex">
                  <platformIcon :data="scope.row.platformName" />
                  <ToolTip :content="scope.row.platformName" />
                </div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="合作形式" min-width="110">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.cooperationForm" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="询单标签" min-width="210">
              <template slot-scope="scope">
                <TagSelect v-model="scope.row.tagName" mode="list" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="响应情况" prop="responsed" sortable="custom" min-width="110">
              <template slot-scope="scope">
                <div v-if="!handleProcess(scope.row, 'responsed')">--</div>
                <div v-else>
                  <span :style="{color:handleProcess(scope.row, 'responsed')[0] !== handleProcess(scope.row, 'responsed')[1]?'#FF4E5F':'#333333'}">{{ handleProcess(scope.row, 'responsed')[0] }}</span>/{{ handleProcess(scope.row, 'responsed')[1] }}
                </div>
              </template>
            </u-table-column>
            <u-table-column align="left" prop="interestCount" sortable="custom" min-width="140">
              <template slot="header">
                <span style="display: inline-flex;align-items: center;">感兴趣情况
                  <InfoIcon content="感兴趣博主数/问询博主数" style="width: 16px;height: 16px;margin-left: 4px;" />
                </span>
              </template>
              <template slot-scope="scope">
                <div v-if="!handleProcess(scope.row, 'interestCount')">--</div>
                <div v-else>
                  <span :style="{color:handleProcess(scope.row, 'interestCount')[0] !== handleProcess(scope.row, 'interestCount')[1]?'#FF4E5F':'#333333'}">{{ handleProcess(scope.row, 'interestCount')[0] }}</span>/{{ handleProcess(scope.row, 'interestCount')[1] }}
                </div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="询单状态">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.status || scope.row.status===0" :open-delay="800" class="item" placement="top" effect="dark">
                  <div slot="content">{{ scope.row.status | flyNoticeStatus }}</div>
                  <div style="display:flex;align-items:center">
                    <div :class="`color-${scope.row.status}`" class="dot"/>
                    <div :style="{color:scope.row.status === 2?'#AEB6C7':'#333333'}">{{ scope.row.status | flyNoticeStatus }}</div>
                  </div>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="特殊备注">
              <template slot-scope="scope">
                <div v-if="scope.row.remarks && scope.row.remarks.length">
                  <el-tooltip :open-delay="800" placement="top" effect="dark">
                    <div slot="content" style="max-width:300px;  overflow:auto; min-width:200px; max-height:300px">
                      <div v-for="(item,index) in scope.row.remarks" :key="index">
                        <div style="max-width:300px" >{{ `${index + 1}.${item.content}` }}</div>
                      </div>
                    </div>
                    <div class="ellipsisOne" style="max-width:300px">{{ handleRemarks(scope.row.remarks) }}</div>
                  </el-tooltip>
                </div>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="服务号通知" width="110">
              <template slot-scope="scope">
                <div v-if="typeof scope.row.enableNotification === 'number'">{{ scope.row.enableNotification ? '开启' : '关闭' }}</div>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建人">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.creator" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="所属部门">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.departmentName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="发布时间" min-width="160" prop="createDate" sortable="custom">
              <template slot-scope="scope">
                <ToolTip :content="format(scope.row.createDate,'YYYY/MM/DD HH:mm:ss')" />
              </template>
            </u-table-column>
            <u-table-column :width="operateWidth" fixed="right" align="left" label="操作">
              <template slot-scope="scope">
                <div class="operate">
                  <div v-if="scope.row.status !== 6 && !showMobilePage" class="button-text" @click="toDetail(scope.row)">查看</div>
                  <MoreOpeator
                    :list="[
                      {label: '查看', handelClick: () => {toDetail(scope.row)}, auth: showMobilePage && scope.row.status !== 6},
                      {label: '查看关联订单', handelClick: () => {toOrderList(scope.row)}, disabled: !scope.row.sn},
                      {label: '编辑', handelClick: () => {toEdit(scope.row)}, disabled: setEditDisable(scope.row)},
                      {label: '删除', handelClick: () => {toDelete(scope.row)}, disabled: setDelDisable(scope.row)},
                    ]"
                  >
                    <div v-if="!showMobilePage" slot="button" :class="{'border-left':scope.row.status !== 6}" class="button-text">更多<i class="el-icon-arrow-down"/></div>
                    <el-image v-else slot="button" :src="operateBtns" class="dropdown-img"/>
                  </MoreOpeator>
                </div>
              </template>
            </u-table-column>
          </u-table>
          <EmptyPlaceholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
        </div>
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="page"
            :page-size="perPage"
            :total="list.total"
            :small="true"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <fixed-pagination>
          <template v-if="showMobilePage">
            <FilterInput
              ref="FilterToolRef"
              v-model="paramsObj"
              :filter-list="filterList"
              show-search-btn
              show-mobile-icon
              @selectChange="handelFilterInputChange"
              @deleteTagBefore="deleteTagBefore"
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus" />
            <createBtn v-if="hasRouteAuth('crm:flyNotice:create')" mobile-table @click.native="toCreate"/>
            <MoreOpeator
              ref="moreOpeatorRef"
              :list="[
                {label:'导出', type: 'export', auth: hasRouteAuth('crm:queryOrder:export'), exportApi:'/admin/queryOrder/export', exportName: '飞来询单导出', isBeforeExport: true, beforeExport: exportBeforeExport, exportNameLast: exportNameLast(), refName:'exportRef'},
              ]"
              style="margin-left: 12px;"
              label="批量操作"
              show-mobile-icon
            />
          </template>
          <template v-else>
            <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
            <div style="flex: 1;" />
            <el-pagination
              v-show="list.total > 0"
              :current-page.sync="page"
              :page-size="perPage"
              :total="list.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import { mapState } from 'vuex';
import ListTab from '@/components/ListTab';
import PlatformIcon from '@/components/Common/platformIcon';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createBtn from '@/components/Common/baseComponent/createBtn';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import DataDisplay from '@/components/Common/baseComponent/dataDisplay';
import TagSelect from '@/components/Common/tagSelect';
import { flyNoticeStatus } from '@/filters/status';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import { getTagAll } from '@/api/config';
import { tabList, queryOrderList, deleteQueryOrder, getOrderDashboard } from '@/api/flyNotice';
import { getDepartmentAll } from '@/api/config';
import { platformList, orderFormList } from '@/api/select';
import { format } from '@/filters/date';
import { showModal } from '@/utils/message';
import { TAG_MODULES } from '@/utils/const';
import { hasRouteAuth } from '@/utils/permission';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import tableSelections from '@/mixins/tableSelections';
import icon_7 from '@/assets/dataDisplay/icon_7.png';
import icon_32 from '@/assets/dataDisplay/icon_32.png';
import icon_44 from '@/assets/dataDisplay/icon_44.png';
import icon_59 from '@/assets/dataDisplay/icon_59.png';

export default {
  components: {
    ListTab,
    EmptyPlaceholder,
    createBtn,
    PlatformIcon,
    btnGroup,
    DataDisplay,
    TagSelect
  },
  filters: {
    flyNoticeStatus
  },
  mixins: [TableAdaptive, mobileTable, tableSelections],
  data() {
    return {
      TAG_MODULES,
      tabs: [],
      list: {
        items: [],
        total: 0,
        isInit: true
      },
      statisticsData: {},
      sortName: '',
      sortType: '',
      tabStatus: -1,
      page: 1,
      perPage: 20,
      paramsObj: {},
      listLoading: false,
      deptTreeList: [],
      orderPlatformOption: [],
      tagTreeList: [],
      tableRefName: 'tableRef', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      isUmyTable: true,
      rangeKeyArr: [{
        attr: 'createDate',
        start: 'createStartTime',
        end: 'createEndTime',
        type: 'time',
        addTime: true
      }],
      orderFormOption: [],
      cancelToken: null
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    filterList() {
      const arr = [
        // 输入框
        { keyword: 'sn', name: '询单编号', labelWidth: '100px', type: 'input' },
        { keyword: 'accountName', name: '账号名称', labelWidth: '100px', type: 'input' },
        { keyword: 'brandName', name: '品牌名称', labelWidth: '100px', type: 'input' },
        { keyword: 'productName', name: '产品名称', labelWidth: '100px', type: 'input' },
        { keyword: 'creator', name: '创建人', labelWidth: '100px', type: 'input' },
        // 下拉
        { keyword: 'platformId', name: '下单平台', type: 'mulSelect', options: this.orderPlatformOption },
        { keyword: 'cooperationFormId', name: '合作形式', type: 'mulSelect', emptyText: '请先选择下单平台', options: this.orderFormOption },
        { keyword: 'tagName', name: '询单标签', valueName: 'name', labelName: 'name',
          childrenVal: 'item', type: 'cascaderSelect', checkStrictly: false, options: this.tagTreeList,
          multiple: true, filterable: true, collapseTags: true
        },
        { keyword: 'departmentId', name: '所属部门', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.deptTreeList },
        { keyword: 'enableNotification', name: '服务号通知', type: 'select', options: [{ value: 0, label: '关闭' },
          { value: 1, label: '开启' }] },
        // 日期
        { keyword: 'createDate', name: '发布时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' }
      ];
      return arr;
    },
    statisticsList() {
      const { activations, activationRate, responseRate, interestRate } = this.statisticsData;
      return [
        { data: activations, label: '海询激活条数', tooltip: '有被订单关联过的询单，计数为1', icon: icon_7, isMoney: false },
        { data: activationRate, label: '海询激活率', tooltip: '成交询单数/询单总数', icon: icon_32, isMoney: false, unit: '%' },
        { data: responseRate, label: '响应率', tooltip: '响应的账号/已收到的账号', icon: icon_44, iconSize: 16, isMoney: false, unit: '%' },
        { data: interestRate, label: '感兴趣率', tooltip: '感兴趣的账号/已收到的账号', icon: icon_59, isMoney: false, unit: '%' }
      ];
    }
  },
  watch: {
    'paramsObj.platformId'(list) {
      if (!list || !list.length) {
        this.orderFormOption = [];
      }
    },
    list: {
      handler(val) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(val.items);
        });
      },
      deep: true
    }
  },
  created() {
    if (this.$route.query && this.$route.query.tabStatus) {
      this.tabStatus = Number(this.$route.query.tabStatus);
    }
    const accountName = this.$route.query.accountName;
    if (accountName) {
      this.$set(this.paramsObj, 'accountName', accountName);
    }
    this.queryDeptTreeList();
    this.platformList();
    this.queryTagTreeList();
    this.getOrderForm();
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'flyNoticeCreate' || from.name === 'flyNoticeEdit') {
      to.meta.isRedirectCreate = true;
    } else {
      to.meta.isRedirectCreate = false;
    }
    next();
  },
  activated() {
    if (this.$route.meta.isRedirectCreate) {
      this.fetchData();
    } else {
      const hasDefaultPresetFilter = this.$refs.FilterToolRef && this.$refs.FilterToolRef.hasDefaultPresetFilter;
      // 当预设的默认筛选且为第一次进入页面时，不请求数据（会在 filterTool 组件进行筛选）
      if (!this.list.isInit || !hasDefaultPresetFilter) {
        this.fetchData(true);
      }
    }
  },
  methods: {
    hasRouteAuth,
    format,
    // 获取统计数据
    async getCostData(paramsObj = '') {
      try {
        const params = paramsObj ? JSON.parse(JSON.stringify(paramsObj)) : this.formatParams(false);
        const { page, perPage } = params;
        if (page) delete params.page;
        if (perPage) delete params.perPage;
        const res = await getOrderDashboard(params);
        const { code, data = {}} = res;
        if (code === 200) {
          this.statisticsData = data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    exportNameLast() {
      const date = new Date().getTime();
      return `${this.format(date, 'YYYYMMDDHHmmss').substring(8)}`;
    },
    // 获取下单平台的列表
    async platformList() {
      try {
        const result = await platformList();
        result.data.forEach((i) => {
          i.label = i.value;
          i.value = i.id;
        });
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    exportBeforeExport() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length === 0) {
        this.$message.warning('请选择要导出的询单数据');
        return;
      }
      if (this.multipleSelectionAll.length && this.multipleSelectionAll.length > 100) {
        this.$message.warning('单次最高可导出100条询单数据，请重新选择');
        return;
      }
      const params = this.formatParams();
      params.ids = this.multipleSelectionAll.map(i => i.id).join(',');
      if (!this.showMobilePage && this.$refs.btnGroupRef) {
        this.$refs.btnGroupRef.btnExport(params);
      } else if (this.showMobilePage && this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'exportRef');
      }
    },
    handleRemarks(list) {
      return list.map(el => el.content).join(',');
    },
    sortMethod(a) {
      if (a.order) {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      } else {
        this.sortName = '';
        this.sortType = '';
      }
      this.fetchData();
    },
    // 获取部门列表
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    // 获取下单形式
    async getOrderForm() {
      const params = { platformId: this.paramsObj.platformId };
      paramsAryToStr(['platformId'], params);
      if (!params.platformId) {
        return;
      }
      try {
        const result = await orderFormList(params.platformId);
        if (result.data && result.data.length) {
          result.data.forEach(i => {
            i.label = i.value;
            i.value = i.id;
          });
        }
        this.orderFormOption = result.data;
        if (this.paramsObj.cooperationFormId) {
          const formId = this.orderFormOption.find(i => i.value === this.paramsObj.cooperationFormId);
          if (!formId) this.$set(this.paramsObj, 'cooperationFormId', '');
        }
      } catch (error) {
        console.log(error);
      }
    },
    setDelDisable(row) {
      const statusArr = [6, 2];// 草稿、已撤回
      return !((statusArr.includes(row.status) && row.creatorId === this.userInfo.id) || (statusArr.includes(row.status) && hasRouteAuth('crm:flyNotice:delete')));
    },
    setEditDisable(row) {
      const statusArr = [6, 2];// 草稿、已撤回且为创建人
      return !(statusArr.includes(row.status) && row.creatorId === this.userInfo.id);
    },
    toEdit(row) {
      const query = {
        id: row.id
      };
      if (row.status === 6) {
        query.isDraft = true;
      }
      this.$router.push({
        name: 'flyNoticeEdit',
        query
      });
    },
    deleteTagBefore(key) {
      if (key === 'platformId') {
        this.$set(this.paramsObj, 'cooperationFormId', '');
      }
    },
    handelFilterInputChange({ value, item }) {
      if (item.keyword === 'platformId') {
        this.$set(this.paramsObj, 'cooperationFormId', '');
        this.getOrderForm();
      }
    },
    // 询单标签
    queryTagTreeList() {
      const params = { type: this.TAG_MODULES.FLY_NOTICE };
      getTagAll(params).then(res => {
        this.tagTreeList = (res && res.data) || [];
        this.tagTreeList.forEach(item => {
          if (!item.item) item.disabled = true;
        });
      }).catch(e => {
        console.log(e);
      });
    },
    getTabs() {
      const params = this.formatParams();
      tabList(params).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.tabs = this.setTabs(res.data);
      }).catch(err => {
        console.log(err);
      });
    },
    setTabs(list) {
      // 已撤回和已完成不展示数量
      if (!Array.isArray(list) || !list.length) {
        return [];
      }
      list.forEach(item => {
        if (['已撤回', '已完成'].includes(item.name)) {
          item.num = null;
        }
      });
      return list;
    },
    handleTabClick(id) {
      this.tabStatus = id;
      this.list = { items: [] };
      this.fetchData(true);
    },
    fetchData(reset = false) {
      if (this.cancelToken) this.cancelToken.cancel('cancel');
      const source = axios.CancelToken.source();// 用于取消请求
      this.cancelToken = source;
      this.getTabs();
      this.listLoading = true;
      if (reset) this.page = 1;
      const params = this.formatParams();
      params.sortType = this.sortType;
      params.sortName = this.sortName;
      params.page = this.page;
      params.perPage = this.perPage;
      params.tabStatus = this.tabStatus;
      this.getCostData(params);
      queryOrderList(params, source.token).then(res => {
        this.listLoading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.list = res.data;
        this.list.isInit = false;
      }).catch(err => {
        this.listLoading = false;
        this.list.isInit = false;
        console.log(err);
      });
    },
    formatParams() {
      const paramsObj = JSON.parse(JSON.stringify(this.paramsObj));
      paramsRangeFormat(this.rangeKeyArr, paramsObj);
      paramsAryToStr(['tagName', 'platformId', 'cooperationFormId', 'departmentId'], paramsObj);
      return paramsObj;
    },
    toCreate() {
      this.$router.push({
        name: 'flyNoticeCreate'
      });
    },
    toDetail(row) {
      this.$router.push({
        name: 'flyNoticeDetail',
        query: {
          id: row.id
        }
      });
    },
    toOrderList(row) {
      const routeUrl = this.$router.resolve({
        name: 'allOrder',
        query: {
          queryOrderSn: row.sn
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    toDelete(row) {
      showModal('确定删除该询单?', '', {
        iconClass: 'del-icon'
      }).then(() => {
        deleteQueryOrder(row.id).then(res => {
          this.$message.success('删除成功');
          if (this.page > 1 && this.perPage * (this.page - 1) + 1 === this.list.total) {
            this.page--;
          }
          this.fetchData();
        }).catch(err => { console.log(err); });
      }).catch(() => {
        return false;
      });
    },
    handleProcess(row, key) {
      if (typeof row[key] !== 'string' || !row[key]) {
        return false;
      }
      return row[key].split('/');
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    }
  }
};
</script>
<style lang="scss" scoped>
$bgc: #FD8546 1, #999 2, #31CC9C 3, #FFBC3D 6;
	.flyNotice{
		.flyNotice-list{
			margin: 16px 16px 0 16px;
			background-color: #fff;
			padding: 20px 24px 55px 24px;
		}
    .operate{
      display: flex;
      align-items: center;
    }
    .border-left {
      position: relative;
      padding-left:6px;
      margin-left: 6px;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        width: 1px;
        background: #ddd;
        height: 14px;
      }
    }
		.filter {
			display: flex;
			align-items: center;
      margin-bottom: 16px;
			.create-btn{
				height: 32px;
				font-size: 14px;
				padding: 0 15px;
			}
		}
    .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      margin-right: 5px;
      @each $c, $i in $bgc {
        &.color-#{$i} {
          background: $c;
        }
      }
    }
    .pointer{
      cursor: pointer;
    }
    &::v-deep {
      .export-button {
        span {
          white-space: nowrap;
        }
      }
    }
	}
</style>
